16-02 | Introdução HTML 


HTML 


HTML (abreviação para a expressão inglesa Hyper Text Markup 
Language, que significa Linguagem de Marcação de Hipertexto) é uma 
linguagem de marcação utilizada na construção de páginas na Web. 
Documentos HTML podem ser interpretados por navegadores. 


Estrutura Básica 
<html> 


<head> 
<meta charset="utf-8"> 
<title> Título </title> 
</head> 


<body> 
FEEVALE - 
Conteúdo do site 
</body> 


</html> 


Para testar o site você deve digitar o código em um editor de texto e salvar 
com a extensão HTML. 


Exemplo: arquivo1.html 


Depois abrir no Windows explorer e ver como ficou o site. 


Atributos do <BODY> 
Apesar de fazer parte da estrutura básica de um documento HTML, 


este comando apresenta várias sínteses internas que refletem na estrutura de 
uma página. Vejamos rapidamente os comandos que podem incorporar a tag 
Body e melhorar o design dá página. 


BGCOLOR - Atribui cor ao fundo. 


TEXT — Especifica a cor do texto-padrão para toda página. 


Exemplo: 
<html> 
<head> 

<meta charset="utf-8"> 

<title> Atributos do Body </title> 
</head> 
<body bgcolor=="4808080" text="4000000"> 
E assim que funciona o background 
</body> 
</html> 


Paragrafação de textos 
Até agora trabalhamos com configurações básicas para um layout 


superficial da página. Mas e se quisermos trabalhar com textos? Textos são bem 
complexos, porém se formatados de forma correta e inteligente o resultado vai 
ser uma página muito agradável visualmente. Primeiramente trabalharemos com 
a disposição do texto em relação a página para depois colocarmos cores e 


diversos estilos de fontes ao mesmo. 


<P> O <P> deve ser inserido a cada início de cada parágrafo, pois 
dessa maneira o browser saberá interpretar que quando um parágrafo terminar, 


instintivamente, o próximo texto que começar deverá aparecer na linha debaixo. 


Alinhamento de textos 
Se quisermos colocar um texto centralizado ou alinhado a esquerda 


termos que colocar barras de espaços até o texto chegar na posição que 
queremos? A resposta é NÃO!! Seria muito trabalho para até então pouco 
resultado (e você verá que só colocar as tais barras de espaços não funciona). 
Para trabalharmos com facilidade no alinhamento de textos, usufruiremos o 


comando <P>. 


Atributo ALIGN dentro do <P> 
Este atributo permite que coloquemos um texto qualquer em uma 


determinada posição no browser, ou seja podemos deslocar um texto para este 


ficar a esquerda, direita ou até mesmo no centro do navegador. Vejamos agora 
os atributos do ALIGN usados dentro do P: 


CENTER Centraliza o texto em relação a página. 
RIGHT Alinha o texto à direita da página. 
LEFT Alinha o texto à esquerda da página. 


JUSTIFY Justifica o texto em relação a página. 


Exemplo: 
<html> 
<head> 
<title> Alinhamento de Textos </title> 
</head> 
<body> 
<p align="left"> Alinhamento à esquerda </p> 
<p align="center"> Alinhamento ao centro </p> 
<p align="right"> Alinhamento à direita </p> 
</body> 
</html> 


Tag H 
Este comando traz uma fonte pré-formatada com tamanhos 


padronizados e ela propriamente negritada. A seguir veremos a tag H com seus 
respectivos parâmetros <H1>,<H2>,<H3>,<H4>,<H5> e <H6>. Repare que a tag 
<P> não foi usada, e mesmo assim o texto a cada </H> é lançado para a linha 


debaixo. 


Exemplo: 

<html> 

<head> 
<title> Exemplos do Parâmetro H </title> 
<meta charset="utf-8"> 

</head> 

<body> 
<H1> Tamanho H1 </H1> 
<H2> Tamanho H2 </H2> 
<H3> Tamanho H3 </H3> 
<H4> Tamanho H4 </H4> 
<H5> Tamanho H5 </H5> 
<H6> Tamanho H6 </H6> 

</body> 

</html> 


Formatação de textos 
Na Internet, em geral, muitas vezes não é a interface gráfica de uma 


página que define seu valor e sim o conteúdo que ela apresenta. Contudo, além 
de ter um conteúdo cultural interessante, é necessário que o texto seja 
apresentado em uma forma visualmente agradável. É necessária a utilização de 
muitos parâmetros para configurar a formatação de um texto em HTML. Veremos 


todos os parâmetros possíveis agora. 


Tag Font 
Trabalharemos agora com o comando Font, a formatação de textos, 


ou seja, colocaremos em determinadas palavras ou parágrafos o tamanho, a cor 
e as características que desejarmos. No entanto, a tag <Font> não trabalha 
sozinha, ela tem atributos que "devem" auxiliá-la, veremos todos eles nas 
páginas que veremos a seguir. Não se preocupe com a digitação de um texto, 
pois toda vez que você chegar ao final da linha referente a uma página, 
automaticamente ele será lançado para a linha de baixo. 


<Font Size> Esta tag modifica o tamanho da fonte. 


A escalabilidade do tamanho de uma fonte vai de 1 até 7, e logo quanto maior o 
número maior a fonte. 


Exemplo: 

<html> 

<head> 
<title> Exemplos de tamanho de Fontes </title> 

</head> 

<body> 
<font size=1> Tamanho de texto com Font Size = 1 </font><br> 
<font size=2> Tamanho de texto com Font Size = 2 </font><br> 
<font size=3> Tamanho de texto com Font Size = 3 </font><br> 
<font size=4> Tamanho de texto com Font Size = 4 </font><br> 
<font size=5> Tamanho de texto com Font Size = 5 </font><br> 
<font size=6> Tamanho de texto com Font Size = 6 </font><br> 
<font size=7> Tamanho de texto com Font Size = 7 </font><br> 

</body> 

</html> 


<Font Color> 


Contudo, não são somente as variações de tamanhos que um texto 
recebe com a tag Font, agora aprenderemos como colocar cores em 


determinados blocos de textos diferentes. 


<Font Face> 
Vimos até agora as diversas variações que um texto pode adquirir em 


relação a tamanho e cores, no entanto nos falta mudar seu tipo de "letra", ou 
seja, realizar a troca da fonte. Vamos utilizar da síntese Face, para alterarmos a 


"cara" de um texto. 


Quebras de Linha 
Agora veremos que não é necessário usarmos o comando <PRE> 


para executarmos uma quebra de linha, mesmo porque este comando altera por 
si só o estilo da fonte. O comando <BR> não alteram absolutamente em nada o 
texto. 


<BR> 
Usada para quebrar uma linha, ou seja, desviar o texto para a linha 


de baixo, contudo, não é necessária a colocação da tag </BR>, pois assim que 
o comando é desferido ele executa a quebra automática da linha. 


Linhas divisórias 
E interessante ver que um texto muito bem redigido pode ficar confuso 


devido a diversificação de assuntos que ele pode abranger em seus mais 
diversos parágrafos. 
E agora, que tal separar esses parágrafos por quebras de linhas <BR>? 

Para resolver esse tipo de problema, podemos colocar linhas entre os 
parágrafos com os mais diversos tipos de tamanhos e cores possíveis para 
separar os blocos de textos e tornar a leitura e o layout da página mais agradável. 


<HR> e seus respectivos atributos 

Vejamos agora o comando <HR> e seus possíveis atributos para 
trocarmos a aparência de uma linha ou mais linhas. 
ALIGN Posiciona a linha em algum canto da tela (esquerda, meio ou centro). 
SIZE Altera a espessura da linha (em pixels). 


NOSHADE Remove o "efeito" de sombreamento da linha. 


WIDTH Define o comprimento da linha (em pixels) em relação a página. 


Exemplo: 
<html> 
<head> 
<title> Exemplos de Linhas Horizontais </title> 
</head> 
<body> 
<HR> 
<HR width="20%"> 
<HR noshade> 
<HR width="150" align="right"> 
<HR size="10" noshade> 
<HR size="50" width="10" noshade> 
</body> 
</html> 


16-02 | Atividade Prática — Primeiro Site 
Habilidades: 
Saber desenvolver um site básico utilizando a linguagem HTML. 
Prática: 
Desenvolver um site com o título e letra de uma música a sua escolha. 
Características: 
Background 
Título 
Formatação de fonte 


Linhas 
Alinhamento 


